<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ITOUC 选课助手</title>
    <link rel="icon" href="/img/favicon.png">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link id="layuicss-layer" rel="stylesheet" href="/layui/css/modules/layer/default/layer.css">
    <link id="layuicss-layuiAdmin" rel="stylesheet" href="/css/admin.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/layui/lay/modules/layer.js" charset="UTF-8"></script>
</head>
<body layadmin-themealias="default" class="layui-layout-body">
<div id="LAY_app" class="layadmin-tabspage-none">
    <link rel="stylesheet" href="/css/login.css" media="all">
    <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
        <div class="layadmin-user-login-main">
            <div class="layadmin-user-login-box layadmin-user-login-header">
                <h2>IT OUC</h2>
                <p>ITOUC 选课助手</p>
            </div>
            <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-userCode"></label>
                    <input type="text" name="userCode" id="LAY-user-login-userCode" lay-verify="required" placeholder="学号" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                    <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="教务密码" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <button id="admin-login-button" class="layui-btn layui-btn-fluid"  lay-filter="LAY-user-login-submit">登 录</button>
                </div>
                <div id="config" class="layui-form-item" style="margin-bottom: 20px;">
                    <input type="checkbox" id="remember" name="remember" lay-skin="primary" lay-filter="remember" title="记住密码">
                    <div class="layadmin-user-jump-change" lay-skin="primary"><input id="autoLogin" lay-filter="autoLogin" type="checkbox" name="autoLogin" lay-skin="primary" title="自动登录"></div>
                </div>
            </div>
        </div>
        <div class="layui-trans layadmin-user-login-footer">
            <p>© 2019 <a href="http://www.itstudio.club/itstudio" target="_blank">爱特工作室</a></p>
            <p><a href="http://www.beian.miit.gov.cn/">鲁ICP备18019527号-2</a></p>
        </div>
    </div>
</div>
<script src="/layui/layui.js"></script>
<style id="LAY_layadmin_theme">.layui-side-menu,.layadmin-pagetabs .layui-tab-title li:after,.layadmin-pagetabs .layui-tab-title li.layui-this:after,.layui-layer-admin .layui-layer-title,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child{background-color:#20222A !important;}.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a{background-color:#009688 !important;}.layui-layout-admin .layui-logo{background-color:#20222A !important;}</style>


<script>

    layui.use(['jquery', 'form'], function(){
        var $ = layui.$, form = layui.form;
        // safari渲染有些问题
        if($('#config')[0].offsetHeight > 50) {
            var h = $('#config')[0].offsetHeight / 2;
            $('.layadmin-user-jump-change').css('margin-top', '-' + h + 'px')
        }
        form.render();
        $("#admin-login-button").click(function () {
            var load = layer.load(2);
            if (valid()){
                var userCode = document.getElementById("LAY-user-login-userCode").value;
                var password = document.getElementById("LAY-user-login-password").value;
                var data = {
                    userCode: userCode,
                    password: password
                };
                $.ajax({
                    url:        '/jw/login',
                    data:       data,
                    type:       'POST',
                    complete    :function (result) {
                        layer.close(load);
                        result = result.responseJSON;
                        var status = result.status;
                        if (status == 200){
                            layui.data('login', {
                                key: 'userCode',
                                value: userCode
                            });
                            layui.data('login', {
                                key: 'password',
                                value: password
                            })
                            window.location.href = "/";
                        }else {
                            showResult(result.message);
                        }
                    }
                })
            }
        });
        function valid() {
            var userCode = document.getElementById("LAY-user-login-userCode").value;
            var password = document.getElementById("LAY-user-login-password").value;
            if (userCode == null || userCode == ""){
                showResult("请填写用户名");
                return false;
            }
            if (password == null || password === "") {
                showResult("请填写密码");
                return false;
            }
            return true;
        }
        //显示结果
        function showResult(text) {
            layer.msg("<div style=\"padding: 20px 100px;\">"+ text + "</div>", {
                time: 8000, //8s后自动关闭
                btn: ['明白了'],
                shade: 0.3,
                yes: function (index, layero) {
                    layer.closeAll();
                }
            });
        }

        // 监听记住密码
        form.on('checkbox(remember)', function(data) {
            if(!data.elem.checked) {    // 若不记住密码，则不自动登录
                $('#autoLogin')[0].checked = false;
            }
            saveSetting();
            form.render();
        })
        // 监听自动登录
        form.on('checkbox(autoLogin)', function(data) {
            if(data.elem.checked) { // 若自动登录，必须记住密码
                $('#remember')[0].checked = true;
            }
            saveSetting();
            form.render();
        })
        // 保存设置
        function saveSetting() {
            layui.data('login', {
                key: 'remember',
                value: $('#remember')[0].checked
            })
            layui.data('login', {
                key: 'autoLogin',
                value: $('#autoLogin')[0].checked
            })
        }
        // 渲染结束前根据设置自动操作
        function beforeLogin() {
            // 尝试获取值
            var userCode = layui.data('login')['userCode'];
            var password = layui.data('login')['password'];
            var remember = layui.data('login')['remember'];
            var autoLogin = layui.data('login')['autoLogin'];
            // 默认值
            if(userCode == undefined) userCode = "";
            if(password == undefined) password = "";
            if(remember == undefined) remember = false;
            if(autoLogin == undefined) autoLogin = false;
            // 渲染
            $('#remember')[0].checked = remember;
            $('#autoLogin')[0].checked = autoLogin;
            form.render();
            if(remember) {  // 若记住密码
                $('#LAY-user-login-userCode')[0].value = userCode;
                $('#LAY-user-login-password')[0].value = password;
            }
            if(autoLogin) {
                $('#admin-login-button')[0].click();
            }
        }
        beforeLogin()
    })
</script>

</body>
</html>